(function () {
    // 点击登录模块的a 隐藏登录模块 显示注册模块
    $('#loginBox a').on('click', () => {
        document.querySelector('#loginBox').style.display = 'none'
        document.querySelector('#regBox').style.display = 'block'
    })

    // 点击注册模块的a 隐藏注册模块 显示登录模块
    $('#regBox a').on('click', () => {
        document.querySelector('#loginBox').style.display = 'block'
        document.querySelector('#regBox').style.display = 'none'
    })
})();

function password() {
    // 仿京东显示隐藏
    let pag = true
    const pwd = document.querySelector('.pwd input')
    const label = document.querySelector('.pwd label')
    // 点击显示隐藏
    label.onclick = function () {
        this.classList.toggle('active')
        if (pag) {
            pag = false
            pwd.type = 'text'
        } else {
            pag = true
            pwd.type = 'password'
        }
    }
}
// 调用函数
password()

// 需求自定义校验规则
// console.log(layui);
// 需要拿 form来接收我们的 layui.form
let form = layui.form
// form.verify() 可以自定义校验规则
// 规则的参数是对象 里面的属性是规则名 属性值是规则
form.verify({
    // 值有两类 函数 和 数组
    username: [
        /^[0-9a-zA-Z]{6,10}$/,
        "用户名必须6到10位数字字母"
    ],
    pwd: [
        /^[\S]{6,12}$/,
        '密码必须6到12位，且不能出现空格'
    ],
    // 密码再确认模块
    rpwd: function (value, item) {
        // value 代表的是我们再确认密码的值
        // item 表示的是密码再确认 这个DOM盒子
        let pwd = document.querySelector('#regBox [name=password]').value
        if (pwd !== value) {
            return "两次密码输入不一致"
        }
    }
})

// 注册发送ajax
$('#formReg').on('submit', function (e) {
    // 阻止默认行为 
    e.preventDefault()
    // 发送ajax
    axios({
        method: 'post',
        url: '/api/reguser',
        // 大事件的后端只支持 application/x-www-form-urlenc
        // a=1&b=2&c=3
        data: $(this).serialize()
    }).then(({
        data: res
    }) => {
        if (res.status) {
            //失败提示 
            return layer.msg(res.message);
        }
        // 成功提示 提示框美化
        layer.msg(res.message);
        // 清空表单 通过reset 方法 清空表单
        document.querySelector('#formReg').reset()
        // 切换到登录区域 直接用a链接的切换 加个点击方法 就能实现跳转
        $('#regBox a').click()
    })

})

// 登录发送ajax
$('#formLogin').on('submit', function (e) {
    // 阻止默认行为 阻止表单的提交事件
    e.preventDefault()
    // 发送Ajax
    axios({
        method: 'post',
        url: '/api/login',
        // 一次性获取表单的全部 信息
        data: $(this).serialize()
    }).then(({
        data: res
    }) => {
        // 解构
        const {
            message,
            token,
            status
        } = res
        if (status) {
            return layer.msg(message)
        }
        layer.msg(message)
        // 跳转到大事件首页
        location.href = '/index.html'
        // 清空表单
        $('#formLogin')[0].reset()
        // 保存到本地存储 相当于 令牌 类似7天到10天免登录 时间一到需要重新登录 获取令牌
        localStorage.setItem('token', token)
    })
})